<template>
  <div class="post-detail">
    <div style="height: 40px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/bbs' }">交流论坛</el-breadcrumb-item>
        <el-breadcrumb-item>论坛详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="post" v-loading="postDetailLoading">
      <div class="post-header">
        <div class="post-title">{{ postDetail.postTitle }}</div>
        <div class="post-info">
          <div class="avatar">
            <el-image
              :src="postDetail.avatar || defaultAvatar"
              class="img"
            ></el-image>
          </div>
          <div class="post-info-text">
            <span class="post-info-text-name">{{ postDetail.userName }}</span>
            <span class="post-info-text-time"
              >发布于 {{ formatDate(postDetail.createTime) }}</span
            >
          </div>
        </div>
      </div>
      <div class="post-content">
        <p class="content" v-html="postDetail.content"></p>
        <div class="reply" @click="dialogVisible = true">
          <i class="el-icon-edit" style="font-weight: 600"></i>回复
        </div>
      </div>
    </div>
    <div class="remark-content">
      <!-- dialog框（写评论） -->
      <el-dialog
        style="width: 60%; margin: 14vh auto 0"
        title="回复帖子"
        :center="true"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
      >
        <el-input
          v-model="remark"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 6 }"
          placeholder="请说出您的看法..."
        ></el-input>
        <div style="text-align: right">
          <el-button style="margin-top: 20px" @click="remark = ''"
            >清空</el-button
          >
          <el-button
            type="primary"
            style="margin-top: 20px"
            @click="writeRemark"
            :loading="remarkLoading"
            >提交</el-button
          >
        </div>
      </el-dialog>
      <RemarkView
        :remarkList="remarkList"
        :remarkListLoading="remarkListLoading"
        :total="total"
      ></RemarkView>
      <el-pagination
        v-show="remarkList.length > 0"
        layout="prev, pager, next"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        :total="total"
        :page-count="7"
        style="text-align: right; margin-top: 20px"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import RemarkView from "@/components/RemarkView.vue";
import { getPostById } from "@/api/client/post";
import { getPostRemarkList, insertPostRemark } from "@/api/client/postRemark";
import defaultAvatar from "@/assets/default.jpg";
export default {
  name: "PostDetailView",
  props: ["id"],
  components: {
    RemarkView,
  },
  data() {
    return {
      defaultAvatar,
      postDetail: {},
      postDetailLoading: false,
      dialogVisible: false,
      remark: "",
      remarkLoading: false,
      page: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      remarkList: [],
      remarkListLoading: false,
    };
  },
  async created() {
    await this.getPostDetail();
    await this.getPostRemarkList();
  },
  methods: {
    // 获取帖子详情
    async getPostDetail() {
      try {
        this.postDetailLoading = true;
        const res = await getPostById(this.id);
        this.postDetail = res.data;
      } finally {
        this.postDetailLoading = false;
      }
    },
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 回复帖子
    async writeRemark() {
      if (this.remark.trim() === "") {
        this.$message.warning("评论不能为空");
        return;
      }
      // 转换格式
      this.remark = this.remark
        .replace(/\r\n/g, "<br/>")
        .replace(/\n/g, "<br/>")
        .replace(/\s/g, " ");
      try {
        this.remarkLoading = true;
        const res = await insertPostRemark({
          postId: this.id,
          content: this.remark,
        });
        this.dialogVisible = false;
        this.remark = "";
        this.getPostRemarkList();
      } finally {
        this.remarkLoading = false;
      }
    },
    // 获取帖子回复列表
    async getPostRemarkList() {
      try {
        this.remarkListLoading = true;
        const res = await getPostRemarkList({
          page: this.page,
          pageSize: this.pageSize,
          postId: this.id,
        });
        this.remarkList = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取评论失败");
      } finally {
        this.remarkListLoading = false;
      }
    },
    // 分页查询
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      this.getPostRemarkList();
    },
  },
};
</script>

<style lang="less" scoped>
.post-detail {
  width: 100%;
  height: 100%;
  padding: 10px 60px;
  .post {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
    &:hover {
      box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.22);
    }
    .post-header {
      width: 100%;
      height: 70px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .post-title {
        font-size: 18px;
        font-weight: 700;
      }
      .post-info {
        margin-top: 5px;
        display: flex;
        align-items: flex-end;
        .avatar {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          .img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
        }
        .post-info-text {
          margin-left: 6px;
          color: rgb(158, 165, 171);
          .post-info-text-name {
            font-weight: 700;
            font-size: 15px;
          }
          .post-info-text-time {
            margin-left: 8px;
            font-size: 13px;
            font-weight: 00;
          }
        }
      }
    }
    .post-content {
      margin-top: 20px;
      .content {
        line-height: 1.7;
        // 首行缩进2个字符
        text-indent: 2em;
      }
      .reply {
        margin: 30px auto;
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 5px;
        color: rgb(0, 132, 255);
        font-weight: 600;
        border: 1.6px solid rgb(0, 132, 255);
        cursor: pointer;
      }
    }
  }
  .remark-content {
    width: 90%;
    height: 100%;
    margin: 10px auto;
    padding-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
    &:hover {
      box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.22);
    }
  }
}
</style>